<script setup lang="ts">
import { h, unref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElButton } from "element-plus";
import { useRoute } from "vue-router";

import { ProSelect } from "@/modules/package/form";
import EnumTag from "@/components/common/EnumTag.vue";
import DialogEtimeModify from "./components/DialogEtimeModify.vue";

import ApiActivity from "@/api/activity";
import useModal from "@/hooks/useModal";
import useProTable from "@/hooks/useProTable";
import { EnumEtimeType, EnumStatus } from "@/utils/enum";

const tableColumns = [
  { label: "序号", type: "index", width: 70 },
  { label: "场次名称", prop: "etime_title", minWidth: 120 },
  //  场次类型 1:单场次 2:多场次 3:活动全场通用
  {
    label: "场次类型",
    minWidth: 120,
    slot: ({ row }: any) =>
      h(EnumTag, {
        isText: true,
        value: row.etime_type,
        options: EnumEtimeType,
      }),
  },
  //
  { label: "场次日期", slot: "etime_day", minWidth: 160 },
  {
    label: "状态",
    width: 120,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumStatus,
        value: row.status,
      }),
  },
  { label: "排序", prop: "sort", width: 120 },
  // { label: "备注", prop: "remark", minWidth: 160, },
  {
    label: "操作",
    width: 160,
    slot: ({ row }: any) =>
      h(
        ElButton,
        {
          type: "primary",
          link: true,
          onClick: () => open(row),
        },
        "编辑"
      ),
  },
];

const formItems = [
  {
    label: "状态",
    children: {
      field: "status",
      type: ProSelect,
      options: EnumStatus,
      submitEvent: ["change"],
      props: {
        clearable: true,
      },
    },
  },
];

const { params } = useRoute();

const [Protable, { tableApi }] = useProTable({
  fetchUrl: ApiActivity.etimeList,
  fetchOptions: {
    defaultSearch: { act_id: Number(params.act_id) },
  },
  tableOptions: {
    columns: tableColumns,
  },
  formOptions: {
    formItems,
  },
});

const [Modal, { open, close }] = useModal({
  width: "500px",
  title: (source) => (source?.id ? "编辑场次" : "新增场次"),
});

function handleSuccess() {
  close();
  tableApi.refresh();
}
</script>

<template>
  <Protable>
    <template #tool-left>
      <ElButton :icon="Plus" size="large" type="primary" @click="open()"
        >新增场次
      </ElButton>
    </template>

    <template #table-etime_day="{ row }">
      <template v-if="row.etime_type == 1">
        <!-- 单场次 -->
        <div>{{ row.etime_day }}</div>
        <div>{{ row.start_time }}-{{ row.end_time }}</div>
      </template>
      <template v-else-if="row.etime_day == 2">
        场次ID {{ row.etime_ids }}
      </template>
      <span v-else>当前活动下所有可用单场次</span>
    </template>
  </Protable>

  <Modal>
    <DialogEtimeModify
      :act_id="+params.act_id"
      :list="unref(tableApi.list)"
      @success="handleSuccess"
    />
  </Modal>
</template>
